<template>
	<div ref="wordcloudEcharts" style="width:100%;height:200px"></div>
</template>

<script setup>
	import 'echarts-wordcloud'
	import * as echarts from 'echarts'
	import {
		ref,
		onMounted
	} from "vue"

	const wordcloudEcharts = ref(null)
	const myecharts = ref(null)

	// 初始化配置
	const initOption = () => {
		const wordCloudData = [{
				name: '快餐',
				value: 13
			},
			{
				name: '酸菜鱼',
				value: 20
			},
			{
				name: '充电宝',
				value: 11
			},
			{
				name: '面包',
				value: 17
			},
			{
				name: '炸鸡',
				value: 27
			},
			{
				name: '牛杂',
				value: 47
			},
			{
				name: '螺蛳粉',
				value: 53
			},
			{
				name: '猪脚饭',
				value: 35
			},
		]

		const option = {
			series: [{
				type: 'wordCloud',
				shape: 'circle',
				size: ['1000', '600'],
				textStyle: {
					fontFamily: 'TencentSans, Microsoft YaHei',
					fontSize: [10, 50],
					color: '#00E4BA',
				},
				data: wordCloudData,
				left: 'center',
				top: 'center',
				gridSize: 15, // 文字间隔
				drawOutOfBound: false,
				rotationRange: [0, 0],
				rotationStep: 45,
				rotationLimit: 0,
				animation: false,
				animationDuration: 1000,
				animationEasing: 'cubicInOut',
				animationDelay: (idx) => {
					return idx * 20;
				},
				animationDurationUpdate: 1000,
				animationEasingUpdate: 'cubicInOut',
				animationDelayUpdate: (idx) => {
					return idx * 20;
				},
			}],
		}

		myecharts.value.setOption(option)
	}

	// 创建 echarts 实例
	const initEcharts = () => {
		myecharts.value = echarts.init(wordcloudEcharts.value)
		initOption()
	}

	onMounted(() => {
		initEcharts()
	})
</script>